<template>
  <div style="width: 256px">
    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button>

    <a-menu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      @select="itemselect"
    >
      <template v-for="route in routers">

        <template v-if="route.children&&route.children.length>0">
          <!--二级路由标题-->
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="mail" /><span>{{ route.name }}</span></span>

            <template v-for="route2 in route.children">

              <template v-if="route2.children&&route2.children.length>0">
                <a-sub-menu :key="route2.key">
                  <span slot="title"><a-icon type="mail" /><span>{{ route2.name }}</span></span>

                  <template v-for="route3 in route2.children">
                    <!--三级路由-->
                    <a-menu-item :key="route3.key">
                      <a-icon type="pie-chart" />
                      <span>{{ route3.name }}</span>
                    </a-menu-item>
                  </template>

                </a-sub-menu>
              </template>
              <!--二级路由-->
              <template v-else>
                <a-menu-item :key="route2.key">
                  <a-icon type="pie-chart" />
                  <span>{{ route2.name }}</span>
                </a-menu-item>
              </template>
            </template>
          </a-sub-menu>
        </template>

        <!--一级路由-->
        <template v-else>
          <a-menu-item :key="route.key">
            <a-icon type="pie-chart" />
            <span>{{ route.name }}</span>
          </a-menu-item>
        </template>
      </template>

    </a-menu>
  </div>
</template>

<script>
  /* 固定三级路由 */
  export default {
    data () {
      return {
        routers: [
          {
            name: '一级菜单',
            key: 'yijicaidna'
          },
          {
            name: '二级菜单',
            key: 'erjicaidna',
            children: [
              {
                name: '二级菜单',
                key: 'erjicaidna1'
              },
              {
                name: '二级菜单',
                key: 'erjicaidna2'
              },
              {
                name: '三级菜单',
                key: 'sanjicaidna2',
                children: [
                  {
                    name: '三级菜单',
                    key: 'sanjicaidna23'
                  },
                  {
                    name: '三级菜单',
                    key: 'sanjicaidna21'
                  },
                  {
                    name: '三级菜单',
                    key: 'sanjicaidna22'
                  }
                ]
              }
            ]
          }
        ],
        collapsed: false
      }
    },
    methods: {
      itemselect ({ item, key, selectedKeys }) {
        console.log(item, key)
        // this.$router.push({
        //   path:key
        // })
      },
      toggleCollapsed () {
        this.collapsed = !this.collapsed
      }
    }
  }
</script>
